<template>
	<div>
		<van-nav-bar
			:title="$route.meta.title"
			right-text="保存"
			left-arrow
			@click-left="onClickLeft"
			@click-right="onClickRight"
		/>
		<div class="flex_box">
			<!-- 单选按钮begin -->
			<div class="changeFavorite">
				<div class="favorite" v-for="(item, index) in radius" :key="index">
					<i class="" :class="item.iconfont_color" @click="changeRadiusSelectCheck(index)"></i>
					<span @click="changeRadiusSelectCheck(index)">{{ item.favorite }}</span>
				</div>
			</div>
			<!-- 单选按钮end -->

			<!-- 可选则食材搭配begin -->
			<div class="Ingredients">
				<h3>选择食材搭配</h3>
				<p>可选择多个</p>
				<ul>
					<li v-for="(item, index) in Ingredients" :key="index">
						<div class="Item_box">
							<div
								class="Item"
								:class="{ Item_checked: ingredients.includes(item.favorite) }"
								@click="checkIngredients(item.favorite)"
							>
								<i :class="item.iconfont_category"></i>
								<p>{{ item.favorite }}</p>
								<div class="i_box">
									<i :class="item.iconfont_check" v-show="ingredients.includes(item.favorite)"></i>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<!-- 可选则食材搭配end -->

			<!-- 食材偏好begin -->
			<div class="ingredientsPreference">
				<h3>食材偏好</h3>
				<p>可选择多个</p>
				<div class="Item_box">
					<ul>
						<li v-for="(item, index) in Choice" :key="index" @click="checkChoice(item.favorite)">
							<div class="i_box" :class="{ check_i_box: choice.includes(item.favorite) }">
								<i :class="item.iconfont_check" v-show="choice.includes(item.favorite)"></i>
							</div>
							<div class="Item_text">{{ item.favorite }}</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 食材偏好end -->

			<!-- 添加配料begin -->
			<div class="flex">
				<h3>添加配料</h3>
				<div class="Arr_1">
					<ul>
						<li>
							<van-tag
								closeable
								color="#7232dd"
								size="medium"
								type="primary"
								v-for="(item, index) in addIngredients"
								:key="index"
								@close="removeFood(item)"
								>{{ item }}
							</van-tag>
						</li>
					</ul>
				</div>
				<div class="Arr_2">
					<ul>
						<li>
							<van-tag
								v-show="item.flag"
								size="medium"
								type="primary"
								v-for="(item, index) in AddIngredients"
								:key="index"
								@click="checkFood(item.foods, index)"
							>
								{{ item.foods }}
							</van-tag>
						</li>
					</ul>
				</div>
			</div>
			<!-- 添加配料end -->
		</div>
	</div>
</template>

<script>
export default {
	name: 'UserDietIndex',
	data() {
		return {
			radius: [
				{
					flag: false,
					favorite: '都爱吃',
					iconfont_color: 'iconfont icon-dui',
				},
				{
					flag: false,
					favorite: '肉食动物',
					iconfont_color: 'iconfont icon-duigou',
				},
				{
					flag: false,
					favorite: '素食动物',
					iconfont_color: 'iconfont icon-duigou',
				},
			],
			// 食物搭配
			Ingredients: [
				{
					favorite: '水果',
					iconfont_category: 'iconfont icon-shuiguo',
					iconfont_check: 'iconfont icon-dagou1',
				},
				{
					favorite: '蔬菜',
					iconfont_category: 'iconfont icon-shucai',
					iconfont_check: 'iconfont icon-dagou1',
				},
				{
					favorite: '披萨',
					iconfont_category: 'iconfont icon-pisa1',
					iconfont_check: 'iconfont icon-dagou1',
				},
				{
					favorite: '面食',
					iconfont_category: 'iconfont icon-mianshi',
					iconfont_check: 'iconfont icon-dagou1',
				},
				{
					favorite: '淡水鱼',
					iconfont_category: 'iconfont icon-a-fishyumeishi',
					iconfont_check: 'iconfont icon-dagou1',
				},
				{
					favorite: '牛肉',
					iconfont_category: 'iconfont icon-niurou',
					iconfont_check: 'iconfont icon-dagou1',
				},
			],
			ingredients: [], // 选中的食物搭配
			// 食材偏好
			Choice: [
				{
					favorite: '乳制品',
					iconfont_check: 'iconfont icon-dagou1',
				},
				{
					favorite: '淡水鱼',
					iconfont_check: 'iconfont icon-dagou1',
				},
				{
					favorite: '海鲜',
					iconfont_check: 'iconfont icon-dagou1',
				},
			],
			choice: [], //选中的食材偏好
			// 添加配料
			AddIngredients: [
				{
					foods: '米饭',
					flag: true,
				},
				{
					foods: '牛肉',
					flag: true,
				},
				{
					foods: '鲫鱼',
					flag: true,
				},
				{
					foods: '毛豆',
					flag: true,
				},
				{
					foods: '猪肉',
					flag: true,
				},
				{
					foods: '南瓜',
					flag: true,
				},
				{
					foods: '卷心菜',
					flag: true,
				},
				{
					foods: '可乐',
					flag: true,
				},
				{
					foods: '萝卜干',
					flag: true,
				},
			],
			addIngredients: [], //选中的配料
		};
	},
	methods: {
		onClickLeft() {
			this.$router.go(-1);
		},
		/** @method 保存我的饮食爱好 */
		onClickRight() {
			const toast = this.$toast.loading({
				duration: 0, // 持续展示 toast
				forbidClick: true,
				message: '保存成功',
				type: 'success',
			});

			let second = 3;
			const timer = setInterval(() => {
				second--;
				if (second) {
					toast.message = `返回首页 ${second} 秒`;
				} else {
					clearInterval(timer);
					// 手动清除 Toast
					this.$toast.clear();
					this.$router.push('/');
				}
			}, 1000);
		},
		/**
		 * @method 切换收货地址选项
		 */
		changeRadiusSelectCheck(index) {
			if (this.radius[index].flag == false) {
				this.radius[index].flag = !this.radius[index].flag;
			}
			this.radius[index].flag == true
				? (this.radius[index].iconfont_color = 'iconfont icon-dui')
				: (this.radius[index].iconfont_color = 'iconfont icon-duigou');
			for (let i = 0; i < this.radius.length; i++) {
				if (i != index) {
					this.radius[i].flag = false;
					this.radius[i].iconfont_color = 'iconfont icon-duigou';
				}
			}
		},
		/** @method 选中食物搭配的某一项 */
		checkIngredients(favorite) {
			if (!favorite) return;
			if (this.ingredients.includes(favorite)) {
				this.ingredients.splice(this.ingredients.indexOf(favorite), 1);
			} else {
				this.ingredients.push(favorite);
			}
		},

		/**@method 选中食材偏好的某一项 */
		checkChoice(favorite) {
			if (!favorite) return;
			if (this.choice.includes(favorite)) {
				this.choice.splice(this.choice.indexOf(favorite), 1);
			} else {
				this.choice.push(favorite);
			}
		},

		/**@method 选择添加某项配料 */
		checkFood(food) {
			if (this.addIngredients.includes(food)) return;
			this.addIngredients.push(food);
		},
		/** @method 移除某项配料 */
		removeFood(food) {
			this.addIngredients.splice(this.addIngredients.indexOf(food), 1);
		},
	},
};
</script>

<style scoped>
.flex_box {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 10px 20px;
}
/* 单选按钮begin */
.changeFavorite {
	display: flex;
	margin: 13px 0 0 0;
	line-height: 24px;
	justify-content: space-between;
}
.favorite {
	margin: 0 29px 0 0;
	display: flex;
	align-items: center;
}
.favorite > i {
	font-size: 20px;
}
.favorite > i.icon-dui {
	color: #ffd719;
}
.favorite > span {
	color: rgb(78, 92, 103);
	font-family: Noto Sans SC;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0px;
	text-align: left;
	margin: 0 0 0 7px;
}
/* 单选按钮end */

/* 可选则食材搭配begin */
.Ingredients,
.ingredientsPreference {
	display: flex;
	flex-direction: column;
	margin-top: 30px;
}
.Ingredients h3,
.ingredientsPreference h3,
.flex h3 {
	font-weight: 400;
	margin-bottom: 5px;
}
.Ingredients p,
.ingredientsPreference p {
	color: #6e7c87;
	font-family: Noto Sans SC;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0px;
	text-align: left;
}
.Ingredients ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.Ingredients ul li {
	width: 30%;
	height: 110px;
	margin-bottom: 15px;
}
.Item_box {
	height: 100%;
	display: flex;
	margin-top: 20px;
}
.Item_box .Item {
	width: 100%;
	border: 2px solid #e4efff;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
ul li .Item_box .Item_checked {
	border: 2px solid #ffd719;
	background-color: #ffd719;
	color: #3c454b;
}
.Item_box .Item .i_box {
	width: 26px;
	height: 26px;
	text-align: center;
}
.Item_box .Item * {
	margin: 0 0 3px 0;
}
.Item_box .Item i {
	font-size: 12px;
	color: #6e7c87;
	font-size: 26px;
}
.Item_box .Item p {
	font-size: 14px;
	color: #6e7c87;
	font-family: Noto Sans SC;
	font-weight: 400;
	letter-spacing: 0px;
	text-align: center;
	color: rgb(116, 136, 160);
}
/* 可选则食材搭配end */

/* 食材偏好begin */
.Item_box {
	display: flex;
	margin: 13px 0 0 0;
	line-height: 24px;
}
.Item_box ul {
	display: flex;
}
.Item_box ul li {
	display: flex;
	align-items: center;
	margin-right: 20px;
}
.Item_box ul li .i_box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 2px solid #e4efff;
	border-radius: 5px;
}
.Item_text {
	color: rgb(78, 92, 103);
	font-family: Noto Sans SC;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0px;
	text-align: left;
	margin: 0 0 0 7px;
}
.Item_box ul li .check_i_box {
	border: 2px solid #ffd719;
	background-color: #ffd719;
	color: #3c454b;
}
/* 食材偏好end */

/* 添加配料begin */
.flex {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 20px 10px 0 0;
	padding: 10px 10px 10px 20px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}
.flex .Arr_1 {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 10px;
	border-bottom: 1px solid #dde7f4;
}
.flex .Arr_1 van-tag {
	margin-bottom: 10px;
}
/* 添加配料end */
</style>
